<template>
    <el-main>
        <el-header>
            <el-menu :default-active="activeIndex" class="el-menu" mode="horizontal" background-color="">
                <div style="float:left; width: 50px;padding-top: 10px">LOGO</div>
                <el-menu-item style="margin-left: 600px" @click="toTeachingCenter()" index="3">教学中心</el-menu-item>
                <el-menu-item v-if="isLogin" style="margin-left: 250px">
                    <el-avatar icon="el-icon-user-solid"></el-avatar>
                    <el-link style="margin-left: 10px" :underline="false" @click="toUserInfo"><span>{{userInfo.nickName}}</span>
                    </el-link>
                    <el-link style="margin-left: 10px" :underline="false" @click="logout"><span>退出</span></el-link>
                </el-menu-item>
                <el-menu-item v-else style="margin-left: 250px">
                    <el-button style="margin-left: 100px" type="primary" round @click="loginForm">登录</el-button>
                    <el-button type="primary" round @click="registryForm">注册</el-button>
                </el-menu-item>
            </el-menu>
        </el-header>
        <el-main>

            <!--        登录注册表单-->

            <el-dialog width="400px" title="登录" :visible.sync="loginFormVisible">
                <el-form :model="loginInfo" :rules="loginRules" ref="loginForm">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="loginInfo.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="loginInfo.password" show-password autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" style="text-align: center" class="dialog-footer">
                    <el-button type="primary" @click="login('loginForm')">登 录</el-button>
                </div>
            </el-dialog>
            <el-dialog width="500px" title="注册" :visible.sync="registryFromVisible">
                <el-form>
                    <el-form-item label="用户名">
                        <el-input autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="重复密码">
                        <el-input autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码">
                        <el-input size="small" style="width: 120px;margin-right: 280px;" autocomplete="off"></el-input>
                        <el-image src="http://kiy.cn/FindPassWord/GetCheckCode" alt=""></el-image>
                    </el-form-item>
                </el-form>
                <div slot="footer" style="text-align: center" class="dialog-footer">
                    <el-button type="primary">注册</el-button>
                </div>
            </el-dialog>
            <router-view v-if="isReloadAlive"></router-view>
        </el-main>
    </el-main>
</template>

<script>

    export default {
        provide() {
            return {
                reload: this.reload
            }
        },
        data() {
            return {
                isReloadAlive: true,
                userInfo: {
                    userId: sessionStorage.getItem("userId"),
                    nickName: sessionStorage.getItem("nickName")
                },
                activeIndex: '1',
                size: 2,
                circleUrl: '',
                loginFormVisible: false,
                registryFromVisible: false,
                loginInfo: {
                    username: "",
                    password: ""
                },
                loginRules: {
                    username: [{required: true, message: "请输入用户名", trigger: 'blur'}],
                    password: [{required: true, message: "请输入密码", trigger: 'blur'}]
                }
            }

        },
        methods: {
            reload() {
                this.isReloadAlive = false;
                this.$nextTick(function () {
                    this.isReloadAlive = true;
                })
            },
            toUserInfo() {
                this.$router.push({path: '/userinfo'})
            },
            loginForm() {
                this.loginFormVisible = true;
            },
            registryForm() {
                this.registryFromVisible = true;
            },
            toTeachingCenter() {
                this.$router.push({path: '/teachingCenter/myCourse'})
            },
            login(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.axios.post(this.urls.login, this.loginInfo)
                            .then((res) => {
                                if (res.data.code === 200) {
                                    this.loginFormVisible = false;
                                    this.userInfo.nickName = res.data.data.nickName
                                    sessionStorage.setItem("username", res.data.data.username);
                                    sessionStorage.setItem("nickName", res.data.data.nickName);
                                    sessionStorage.setItem("userId", res.data.data.id);
                                    this.$store.dispatch("setUser", res.data.data.username);
                                    this.$message.success("登录成功")
                                    location.reload();
                                } else {
                                    this.$message.error(res.data.message);
                                }
                            })
                    } else {
                        return false;
                    }
                })
            },
            logout() {
                sessionStorage.removeItem("username")
                sessionStorage.removeItem("nickName")
                sessionStorage.removeItem("userId")
                this.$store.dispatch("setUser", null);
                this.$message.success("登出成功")
                this.toTeachingCenter();
                location.reload();
            }
        },
        computed: {
            isLogin() {

                if (sessionStorage.getItem("username") != null) {
                    this.$store.commit("userStatus", sessionStorage.getItem("username"))
                    this.$store.commit("userIdStatus", sessionStorage.getItem("userId"))
                } else {
                    this.$store.commit("userStatus", null)
                }
                return this.$store.getters.isLogin;
            }
        }

    }
</script>

<style scoped>
    .user-icon {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 10px 0 0 10%;
        outline: none;
    }

    .el-link {
        margin-right: 20px;
    }

    .el-main {
        display: block;
        flex: 1;
        flex-basis: auto;
        overflow: auto;
        box-sizing: border-box;

        padding-bottom: 20px;
        background-color: whitesmoke;
    }
</style>